<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  
<!DOCTYPE html>
<html>
<head>
	<!-- 输入框 -->
 	<link rel="stylesheet" type="text/css" href="static/input/inputCss20160617/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="static/input/inputCss20160617/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="static/input/inputCss20160617/css/default.css">
    <link rel="stylesheet" type="text/css" href="static/input/inputCss20160617/css/set2.css" />

<meta charset="UTF-8">
<title>登录</title>
<!-- <script type="text/javascript" src="static/js/md5.min.js"></script> -->
<style type="text/css">
body{
	background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}
.btn {
      width: 160px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #fff;
      font-size: 24px;
      text-transform: uppercase;
      text-decoration: none;
      font-family: sans-serif;
      box-sizing: border-box;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 400%;
      border-radius: 50px;
      z-index: 1;
    }
    
    .btn:hover {
      animation: animate 8s linear infinite;
    }
    
    @keyframes animate {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 400%;
      }
    }
    .btn:hover::before {
      filter: blur(20px);
      opacity: 1;
      animation: animate 8s linear infinite;
    }
body{
	/* 内边距 */
	padding: 0;
	margin: 0;
}
.box{
	/* 最小高度 */
	min-height: 100vh;
	/* 背景颜色 */
/* 	background-color:#F0F8FF; */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.login{
	margin: auto;
	width: 300px;
	height: 280px;
	background-color: #87CEFA;
	padding: 20px;
		margin: 150px auto;			
		text-align:center;
		border:2px solid #a1a1a1;
		padding:10px 40px; 
		background:#FFFFF0;
		width:350px;
		border-radius:25px;
}
.login h3{
	text-align: center;
}
.login form p label{
	display: inline-block;
	width: 100px;
	text-align: right;
}

</style>
</head>
<body>
	<div class="box">
		<div class="login">		
			<form action="login" method="post">
				<span class="input input--nao">
					<input class="input__field input__field--nao" type="text" id="input-1" name="username" />
					<label class="input__label input__label--nao" for="input-1">
						<span class="input__label-content input__label-content--nao">用户名</span>
					</label>
					<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
					</svg>
				</span>
			<!-- 	<p><label>用户名：</label><input type="text" name="username"></p> -->
				<span class="input input--nariko">
					<input class="input__field input__field--nariko" type="text" id="input-20" name="pwd" />
					<label class="input__label input__label--nariko" for="input-20">
						<span class="input__label-content input__label-content--nariko">密码</span>
					</label>
				</span>
				<!-- <p><label>密码：</label><input type="password" name="pwd"></p> -->
				<p style="text-align: center;"><button type="submit" class="btn">登录</button></p>
			</form>
		</div>
	</div>
</body>
</html>